import React, { useState, useEffect } from 'react'
import { Table, Card, Button, Modal, Form, Input, DatePicker, Space, message } from 'antd'
import { getGiveList } from '../../api/give'
import moment from 'moment'
import lodash from 'lodash'
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}

const GiveList = () => {
  const [List, setList] = useState([])
  const [visible, setVisible] = useState(false)
  const [GiveSumMoney, setGiveSumMoney] = useState(0)
  const [form] = Form.useForm()
  const columns = [
    {
      title: '捐赠对象',
      dataIndex: 'GiveObj',
      key: 'GiveObj',
    },
    {
      title: '捐赠数量',
      dataIndex: 'GiveNumber',
      key: 'GiveNumber',
    },
    {
      title: '捐赠时间',
      dataIndex: 'GiveTime',
      key: 'GiveTime',
    },
    {
      title: '操作',
      key: 'Handle',
      render: (text, record) => (
        <Space size="middle">
          <Button type="link" onClick={() => editItem(record)}>编辑</Button>
          <Button type="link" onClick={() => deleteItem(record)}>删除</Button>
        </Space>
      )
    }
  ]

  useEffect(() => {
    init()
  }, [])
  
  const init = async() => {
    document.title = '捐赠记录'
    const { data } = await getGiveList()
    const { Msg, Result, Status } = data
    if (Status === 200) {
      const { Count, List } = Result
      const list = List.map(v => ({ ...v, key: v.GiveId }))
      setList(list)
      setGiveSumMoney(Count)
      return
    }
    message.error(Msg)
  }

  const submitForm = async () => {
    let values = await form.validateFields()
    form.resetFields()
    values.GiveTime = values.GiveTime.format('YYYY-MM-DD HH:mm:ss')
    console.log(values)
    setVisible(false)
  }
  
  const deleteItem = async(item) => {
    console.log(item)
  }

  const editItem = async(item) => {
    setVisible(true)
    let values = lodash.cloneDeep(item)
    values.GiveTime = moment(values.GiveTime)
    form.setFieldsValue(values)
  }

  const addItem = async() => {
    setVisible(true)
    form.resetFields()
  }

  return (
    <div className="sale-list">
      <Card bordered={false}>
        <div className="flex flex-between">
          <div>捐赠额：{GiveSumMoney}</div>
          <Button type="primary" onClick={addItem}>添加捐赠信息</Button>
        </div>
      </Card>
      <Card bordered={false}>
        <Table dataSource={List} columns={columns} scroll={{ y: 360 }} />
      </Card>
      <Modal
        visible={visible}
        title="添加销售信息"
        okText="提交"
        onCancel={() => setVisible(false)}
        onOk={submitForm}
      >
        <Form
          {...layout}
          form={form}
          name="basic"
          initialValues={{ modifier: 'public' }}
        >
          <Form.Item
            label="捐赠对象"
            name="GiveObj"
            rules={[{ required: true, message: '请输入捐赠对象' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="捐赠数量"
            name="GiveNumber"
            rules={[{ required: true, message: '请输入捐赠数量' }]}
          >
            <Input type="number" />
          </Form.Item>
          <Form.Item
            label="捐赠时间"
            name="GiveTime"
            rules={[{ required: true, message: '请选择捐赠时间' }]}
          >
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default GiveList